import { convertImgUrl } from "@/utils/MyFun";
import { Link } from "react-router-dom";
import styled from "styled-components";

const Styled = styled.div`
  margin-bottom: 5rem;
  display: flex;
  align-items: center;

  .last,
  .next {
    flex: 1;
    overflow: hidden;
    height: 37.5rem;
    width: 100%;
    position: relative;
    a {
      color: white;
    }
    &:hover {
      img {
        transform: scale(1.1);
      }
    }
    img {
      transition: all 0.3s;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
    .info-right,
    .info-left {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
      padding: 15rem;
    }
    .info-left {
      left: 0;
    }
    .info-right {
      right: 0;
    }
  }
`;

const LastNext = ({ lastArticle, nextArticle }) => {
  return (
    <Styled>
      {lastArticle.id ? (
        <div className="last">
          <Link to={`/article/${lastArticle.id}`}>
            <img src={convertImgUrl(lastArticle.img)} alt="" />
            <div className="info-left">
              <p>上一篇</p>
              <p>{lastArticle.title}</p>
            </div>
          </Link>
        </div>
      ) : null}
      {nextArticle.id ? (
        <div className="next">
          <Link to={`/article/${nextArticle.id}`}>
            <img src={convertImgUrl(nextArticle.img)} alt="" />
            <div className="info-right">
              <p>下一篇</p>
              <p>{nextArticle.title}</p>
            </div>
          </Link>
        </div>
      ) : null}
    </Styled>
  );
};

export default LastNext;
